<template>
  <div>
    <a-drawer
      class="_form"
      :title="title"
      :width="width"
      :maskClosable="false"
      :get-container="false"
      :visible="visible"
      :zIndex="zIndex"
      @close="cancel"
    >
      <slot></slot>
      <div v-if="footer" class="drawer-bottom" style="text-align: left">
        <a-space>
            <a-button class="nbcs-btn-default" @click="cancel">
                取消
            </a-button>
            <debounce-button @ok="ok" />
        </a-space>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import debounceButton from "@/components/button/debounceButton";
export default {
  data() {
    return {};
  },
  components: {
    debounceButton
  },
  props: {
    width: {
      type: Number,
      default: 400
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    zIndex: {
      type: Number,
      default: 1000
    },
    footer: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    //点击确定
    ok() {
      this.$emit("ok");
    },
    //点击取消
    cancel() {
      this.$emit("cancel");
    }
  }
};
</script>

<style lang="less" scoped></style>
